<template>
	<view class="content">
		<!-- logo -->
		<image class="logo c-c-c" :src="logo" mode="aspectFit"></image>
		<view class="text c-c-c">
			欢迎登陆易方形租车员工端
		</view>
		<view class="card-box">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" label-width="170rpx" :modelValue="userInfo">
				<uni-forms-item label="手机号" required name="phone">
					<uni-easyinput v-model="userInfo.phone" type="number" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="密码" required name="password">
					<uni-easyinput v-model="userInfo.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<view class="line"></view>
			<button class="btn r-nw-c-c" :loading="loading" @click="submit('valiForm')">
				登录
			</button>
		</view>
	</view>
</template>

<script>
	import { login, configs } from '@/utils/api.js';
	import { throttle } from "../../utils/public.js";
	export default {
		data() {
			return {
				userInfo: {
					phone: '',
					password: ''
				},
				logo: '',
				// 校验规则
				infoRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '密码不能为空'
							}
						]
					}
				},
				loading: false
			}
		},
		onLoad(){
			this.getConfigs();
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.valiForm.setRules(this.infoRules);
		},
		methods: {
			// 获取logo
			getConfigs() {
				uni.showLoading({
					title:'加载中...'
				})
				configs().then(res => {
					this.logo = res.data.logo;
					uni.hideLoading();
				})
			},
			// 提交
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					if(res) {
						if(this.loading) {
							uni.showToast({
								icon: 'none',
								title: '请勿重复提交',
							})
							return;
						}
						this.loading = true;
						login(this.userInfo).then(res => {
							if(res.code == 200) {
								this.loading = false;
								uni.showToast({title: `登录成功`, icon: 'none'});
								uni.setStorageSync('access_token', res.data.token);
								uni.switchTab({
									url:"/pages/order/order"
								})
							}
						})
						setTimeout(() => {
							this.loading = false;
						}, 2000)
					}
				}).catch(err => {})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}
	.content {
		position: fixed;
		left: 50%;
		top: 5%;
		transform: translateX(-50%);
		.logo {
			margin: 0 auto;
			width: 176rpx;
			height: 176rpx;
			// background: linear-gradient( 270deg, #FF3315 0%, #FFB034 100%);
			border-radius: 50%;
		}
		.text {
			margin-top: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			line-height: 48rpx;
		}
		.card-box {
			margin-top: 40rpx;
			padding: 26rpx 32rpx;
			width: 638rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
		}
		.uni-forms-item  {
			border-bottom: 1rpx solid #E6E6E6;
			padding-bottom: 20rpx;
			margin-bottom: 15rpx;
			padding-top: 10rpx;
			&:last-child {
				border: 0 !important;
				padding-bottom: 0 !important;
			}
		}
		.is-input-border {
			border: 1rpx solid transparent !important;
		}
		.uni-forms-item__label {
			font-size: 30rpx;
			color: #666;
		}
		.uni-forms-item__error {
			top: 70% !important;
			right: 0 !important;
			left: unset !important;
		}
		.uni-icons {
			color: #FF7F00 !important;
			font-size: 20px;
		}
		.content-clear-icon {
			display: none !important;
		}
		.line {
			width: 100%;
			height: 1rpx;
			background-color: #E6E6E6;
		}
		.btn {
			margin-top: 100rpx;
			width: 100%;
			height: 88rpx;
			background: linear-gradient(270deg, #FF7F00 0%, #FF3735 100%);
			border-radius: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 32rpx;
		}
	}
</style>